<template>
    <div class="login">
        
        <van-image class="login-bg" :src="require('@/assets/image/els/order-bg.png')"></van-image>
        <div class="login-content">
            <!-- <div class="title">邮箱登录</div> -->
            <div class="input">
                <!-- <p>邮箱</p> -->
                <van-field v-model="form.userNo" :placeholder="$i18n.t('default.login.loginTip')" />
            </div>
            <div class="input">
                <!-- <p>密码</p> -->
                <van-field type="password" v-model="form.password" :placeholder="$i18n.t('default.other.inputTip')+$i18n.t('default.login.password')" />
                <p class="forgetPassword"  @click="gotoForget">{{$i18n.t('default.login.forgetPassword')}}</p>
            </div>
            <div class="btn">
                <van-button class="btn home-button" block @click="submitLogin">{{ $i18n.t('default.login.login') }}</van-button>
            </div>
            <div class="register">
                <!-- <span @click="gotoRegister">没有账号？立即注册</span> -->
                <span @click="changeLang('zh')">{{$i18n.t('default.other.chinese')}}</span>
                <span @click="changeLang('ru')">{{$i18n.t('default.other.russian')}}</span>
                <span @click="changeLang('es')">{{$i18n.t('default.other.spanish')}}</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'login',
    data() {
        return {
            form:{
                userNo: '',
                password: ''
            }
        }
    },
    created(){

    },
    methods: {
        gotoRegister(){
            this.$router.push('/register')
        },
        changeLang(lang){
            this.changeLanguage(this,lang)
            this.handleLang(lang)
        },
        handleLang(command){
            console.log('用户名下拉菜单选择事件 command:',command)
            var _this = this
            console.log(command)
            localStorage.setItem('lang',command);
            this.$i18n.locale = command;
            this.$store.state.Local = command;
            command = command == 'ru'? 'russia':command == 'es'?'mexico':'zh'
        },
        gotoForget(){
            // this.$router.push('/forget')
            this.$toast(this.$i18n.t('default.login.contactAdmin'));
        },
        submitLogin(){
            if(!this.form.userNo){
                this.$toast(this.$i18n.t('default.login.loginTip'))
                return
            }
            if(!this.form.password){
                this.$toast(this.$i18n.t('default.loginTip'))
                return
            }
            this.$api.post(this.$url.login.login, this.form).then(res=>{
                console.log('login...res:',res)
                if(res.code == 'SUCCESS'){
                    this.$toast.success(this.$i18n.t('default.loginSuccess'))
                    this.$store.commit('setToken',res.data.refresh_token);
                    // localStorage.setItem('token', res.data.refresh_token)
                    this.$router.push('/')
                }else{
                    
                }
            })
        }
    },
}
</script>

<style scoped lang='scss'>
@import "@/assets/css/variable.scss";

.login{
    background: #f4f4f4;
    position: relative;
    z-index: 1;
    min-height: 100vh;
    .login-bg{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .title{
        font-size: .4rem;
        font-weight: bold;
        // margin: 40px 0 20px 0;
        margin-bottom: 1rem;
    }
    .input{
        margin-bottom: 20px;
        p{
            font-size: .3rem;
            margin-bottom: 10px;
        }
    }
    .forgetPassword{
        text-align: right;
        margin-top: .1rem;
        color: #F2CB52;
    }
    
}


.login-content{
    position: relative;
    z-index: 2;
    padding: 0 .75rem;
    padding-top: 1.34rem;
    .btn{
        margin-top: .65rem;
        height: .88rem;
        border: none;
        border-radius: .5rem;
    }
    .register{
        text-align: center;
        margin-top: .2rem;
        span{
            font-size: .28rem;
            color: #F2CB52;
            padding: 0 .2rem;
            text-decoration: underline;
        }
    }
}

</style>